<template>
  <view>
    <Search />
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots autoplay interval="1000" circular>
      <swiper-item class="pic" v-for="(item, index) in swiperPic" :key="index">
        <image class="pic" :src="item.image_src" />
      </swiper-item>
    </swiper>
    <!-- 导航 -->
    <view class="nav">
      <navigator
        v-for="(item, index) in navData"
        :key="index"
        :url="item.navigator_url"
      >
        <image :src="item.image_src" class="navPic" />
      </navigator>
    </view>
    <!--列表 -->
    <view class="catogory">
      <view v-for="(item, index) in category" :key="index">
        <image class="goods_pic" :src="item.floor_title.image_src" />

        <view class="wapper">
          <navigator
            class="goods_list"
            v-for="(goods, inx) in item.product_list"
            :key="inx"
            :url="goods.navigator_url"
          >
            <image
              mode="widthFix"
              :src="goods.image_src"
              :style="'width:' + goods.image_width + 'rpx'"
            />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/search/index";
import { getIndexSwaper, getIndexIcon, getIndexGoods } from "@/api";
export default {
  components: {
    Search,
  },
  data() {
    return {
      swiperPic: [],
      category: [],
      navData: [],
    };
  },
  async onLoad() {
   
    const swiperPic = await getIndexSwaper();
    this.swiperPic = swiperPic.data.message;

    const iconData = await getIndexIcon();
    this.category = iconData.data.message;
   
    const goodsData = await getIndexGoods()
     this.navData = goodsData.data.message;
  },
};
</script>

<style lang="less" >
.swiper {
  width: 750rpx;
  height: 340rpx;
  swiper-item {
    width: 750rpx;
    height: 340rpx;
    .pic {
      width: 750rpx;
      height: 340rpx;
    }
  }
}
.goods_pic {
  width: 750rpx;
  height: 60rpx;
}
.wapper {
  width: 750rpx;
  .goods_list {
    overflow: hidden;
    &:nth-child(1) {
      height: 386rpx;
    }
    margin: 10rpx 5rpx;
    float: left;
    height: 188rpx;
    vertical-align: top;
  }
}
.nav {
  display: flex;
  justify-content: space-evenly;
  .navPic {
    width: 140rpx;
    height: 140rpx;
  }
}
</style>
